<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('佐证上传列表')"/>
    <script th:src="@{/static/admin/js/pdf.js}"></script>
    <script th:src="@{/static/admin/js/pdf.worker.js}"></script>
</head>
<style>

    .layui-tab-title {
        /*background-color: #009688;*/
        background-color: #36b368;
        color: #F5F5F5;
        border-bottom: 2px solid #CCCCCC;
    }

    .layui-this {
        background-color: #F5F5F5;
    }

    .layui-tab-item {
        background-color: #F5F5F5;
        border: 1px solid #CCCCCC;
    }


    .evidence {
        width: 100%;
    }

    .evidence_left {
        float: left;
        width: 30%;
    }

    .evidence_right {
        float: right;
        width: 70%;
    }

    .clear {
        clear: both
    }

    .title {
        padding: 10px;
        display: block;
        border-left: #36b368 solid 4px;
        color: #333;
        font-weight: bold;
        font-size: 14px;
        background: #f2f2f2;
    }

    #iconicResult {
        /*margin-left: 30px;*/
        /*margin-top: 5px;*/
    }

    #iconicResult div {
        background: #eee;
        padding: 10px;
        border-bottom: #c9c9c9 solid 1px;
    }

    #iconicResult p {
        display: inline-block;
        line-height: 20px;
        margin-bottom: 10px;
        margin-right: 7px;
        font-size: 13px;
        padding: 0 5px;
        border-bottom: #f0f1f2 solid 1px;
    }

    #qualityBonus {
        /*margin-left: 30px;*/
        /*margin-top: 5px;*/
    }

    #qualityBonus div {
        background: #eee;
        padding: 10px;
        border-bottom: #c9c9c9 solid 1px;
    }

    #qualityBonus p {
        display: inline-block;
        line-height: 20px;
        margin-bottom: 10px;
        margin-right: 7px;
        font-size: 13px;
        padding: 0 5px;
        border-bottom: #f0f1f2 solid 1px;
    }

    #filezip div {
        background: #eee;
        padding: 10px;
        border-bottom: #c9c9c9 solid 1px;
    }

    #filezip p {
        display: inline-block;
        line-height: 20px;
        margin-bottom: 10px;
        margin-right: 7px;
        font-size: 13px;
        padding: 0 5px;
        border-bottom: #f0f1f2 solid 1px;
    }
</style>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="test-hash">
    <ul class="layui-tab-title" id="layui-tab-title">
        <li className="layui-this" lay-id='newproof'>上传佐证</li>
        <li>历史佐证</li>
    </ul>
    <div class="layui-tab-content" id="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="evidence">
                <!--                <div class="layui-form-item" style="padding-top: 5px">-->
                <div class="layui-form-item">
                    <!--                    <label class="layui-form-label">上传文件</label>-->
                    <div class="layui-input-block">
                        <input type="text" name="plusScore" id="plusScore" autocomplete="off" placeholder="上传文件"
                               class="layui-input layui-hide">
                        <button class="layui-btn layui-btn-normal layui-hide" id="testList" type="button">上传文件</button>
                        <button class="layui-btn layui-hide" id="testListAction" type="button">开始上传</button>
                        <button style="float:left;" class="layui-btn layui-btn-warm" type="button"
                                onclick="selectDocument()"> 点击上传
                        </button>
                        <span id="fileName" style="color: red" class="layui-hide"></span>
                        <div id="supportingList" style="float: left;"></div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div style="margin-right: 20px;">
                    <div class="evidence_left">
                        <div style="margin-bottom: 20px;">
                            <label class="title">文件--pdf</label>
                            <div id="iconicResult">

                            </div>
                        </div>
                        <div style="margin-bottom: 20px;">
                            <label class="title">文件--jpg</label>
                            <div id="qualityBonus"></div>
                        </div>
                        <div>
                            <label class="title">文件--zip</label>
                            <div id="filezip"></div>
                        </div>
                    </div>
                </div>
                <div class="evidence_right">
                    <iframe id="pdf" width="100%"></iframe>
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <div class="layui-tab-item">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table id="proofupload-table" lay-filter="proofupload-table" class="layui-tab-table"></table>
                </div>
            </div>
            <!--            <table id="proofupload-table" class="layui-tab-table"></table>-->
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>

<script type="text/html" id="proofupload-toolbar">
    <button class="pear-btn pear-btn-warming pear-btn-md"
            lay-event="batchdownload">
        <i class="layui-icon layui-icon-download-circle"></i>
        批量下载
    </button>
</script>

<script th:inline="javascript" type="text/javascript">
    layui.use(['table', 'form', 'jquery'], function () {
        var upload = layui.upload;
        var table = layui.table;
        var form = layui.form;

        var MODULE_PATH = rootPath + "/InfoFileController/";

        /*<![CDATA[*/
        var taskScoreProofList = /*[[${taskScoreProofList}]]*/ 20;
        /*]]>*/

        $("ul li:first").attr('class', "layui-this");

        var iconicResultHtml = "";
        var qualityBonusHtml = "";
        var filezipHtml = "";
        var infoFiles = [[${infoFiles}]];
        var recordId = [[${recordId}]];
        var fkSubject = [[${fkSubject}]];
        var taskid = [[${taskid}]];
        console.log("---------------" + recordId)
        for (var i = 0; i < infoFiles.length; i++) {
            if (infoFiles[i].suffix === '.pdf') {
                iconicResultHtml += '<div><p>' + infoFiles[i].fileName + '</p>' +
                    '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="viewFile(\'' + infoFiles[i].fileUrl + '\')">查看</button>' +
                    '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delInfoFile(\'' + infoFiles[i].id + '\')">删除</button> </div>';
            }
            if (infoFiles[i].suffix === '.jpg') {
                qualityBonusHtml += '<div><p>' + infoFiles[i].fileName + '</p>' +
                    '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="viewFilejpg(\'' + infoFiles[i].fileUrl + '\')">查看</button>' +
                    '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delInfoFile(\'' + infoFiles[i].id + '\')">删除</button> </div>';
            }
            if (infoFiles[i].suffix === '.zip') {
                filezipHtml += '<div><p>' + infoFiles[i].fileName + '</p>' +
                    '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delInfoFile(\'' + infoFiles[i].id + '\')">删除</button> </div>';
            }
            $('#iconicResult').html(iconicResultHtml);
            $('#qualityBonus').html(qualityBonusHtml);
            $('#filezip').html(filezipHtml);
        }

        window.viewFile = function (e) {
            console.log(e)
            $("#pdf").attr("height", $(document).height());
            $("#pdf").attr("src", e);
        }

        window.viewFilejpg = function (e) {
            var index = layer.open({
                type: 2 ,
                title: '图片查看',
                shade: 0.1,
                // area: ['1500px', '800px'],
                // area: ['1500px', '800px'],
                content: MODULE_PATH + 'upload/pic?e='+e
            });
            layer.full(index)
        }


        var cols0 = [
            [
                {type: 'checkbox'},
                {title: '佐证对应填报任务年月', field: 'taskMonth', align: 'center'},
                {title: '文件名称', field: 'fileName', align: 'center'},
                {title: '佐证上传时间', field: 'filecreatetime', align: 'center'},
            ]
        ]


        //table表单列表
        table.render({
            elem: '#proofupload-table',
            url: MODULE_PATH + 'list4HistoryByDtlNumandTaskid/' + taskid + '/' + recordId,
            method: 'get',
            page: true,
            limits: [20, 50, 100, 200],
            limit: 50,
            cols: cols0,
            skin: 'line',
            scrollPos: 'fixed',
            toolbar: '#proofupload-toolbar',
            defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }],
            loading: false
        });

        //table工具栏绑定
        table.on('toolbar(proofupload-table)', function (obj) {
            if (obj.event === 'batchdownload') {
                window.batchdownload(obj);
            } else if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        //批量删除
        window.batchdownload = function (obj) {
            var data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {icon: 3, time: 1000});
                return false;
            }
            var ids = "";
            for (var i = 0; i < data.length; i++) {
                ids += data[i].fileId + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            // var loading = layer.load();
            // $.ajax({
            //     url: MODULE_PATH + "batchdownload/"+ids,
            //     dataType: 'json',
            //     type: 'get',
            //     success: function (result) {
            //         console.log(result)
            //         layer.close(loading);
            //         if (result.code == 200) {
            //             layer.msg(result.msg, {icon: 1, time: 1000}, function () {
            //                 table.reload('proofupload-table');
            //             });
            //         } else {
            //             layer.msg(result.msg, {icon: 2, time: 1000});
            //         }
            //     }
            // })
            var url = MODULE_PATH + "batchdownload/" + ids;
            var timestamp = Date.parse(new Date());
            downloadFile(url, "历史凭证" + timestamp + ".zip");

        }

        window.delInfoFile =function (fileId) {
            // layer.msg(e);
            $.ajax({
                url: MODULE_PATH + '/delInfoFile',
                dataType: 'json',
                type: 'post',
                data: {
                    "id": fileId
                },
                success: function (result) {
                    if (result.code === 200) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            getCorroborationList();
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
        }

        upload.render({
            elem: '#testList'
            , url: MODULE_PATH + '/supportFileUpload' //改成您自己的上传接口
            , accept: 'file'
            , exts: 'pdf|jpg|zip' //允许上传的文件类型
            , multiple: true
            , auto: false
            , size: 102400
            , bindAction: '#testListAction'
            , choose: function (obj) {
                $('#testListAction').click()
            }
            , before: function (obj) {
                this.data = {
                    'folderName': 'wxTemplent',
                    'recordId': recordId,
                    'fkSubject': fkSubject,
                    'taskid': taskid
                };
            }
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    getCorroborationList();
                    layer.msg(res.msg, {icon: 1, time: 1000});
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1000});
                }
            }
        });

        window.selectDocument = function selectDocument() {
            $('#testList').click()
        }

        function getCorroborationList() {
            $.ajax({
                url: MODULE_PATH + 'getFilebyRecordId',
                dataType: 'json',
                type: 'post',
                data: {
                    fkRecord: recordId,
                    fkSubject: fkSubject,
                    fkTaskId: taskid
                },
                success: function (result) {
                    var listFiles = result.listFiles;
                    var pdfLists = '';
                    var jpgLists = '';
                    var zipLists = '';
                    console.log(listFiles)
                    for (var i = 0; i < listFiles.length; i++) {
                        if (listFiles[i].suffix === '.pdf') {
                            pdfLists += '<div><p>' + listFiles[i].fileName + '</p>' +
                                '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="viewFile(\'' + listFiles[i].fileUrl + '\')">查看</button>' +
                                '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delInfoFile(\'' + listFiles[i].id + '\')">删除</button> </div>';
                            // }
                        }
                        if (listFiles[i].suffix === '.jpg') {
                            jpgLists += '<div><p>' + listFiles[i].fileName + '</p>' +
                                '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="viewFilejpg(\'' + listFiles[i].fileUrl + '\')">查看</button>' +
                                '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delInfoFile(\'' + listFiles[i].id + '\')">删除</button> </div>';
                        }
                        if (listFiles[i].suffix === '.zip') {
                            zipLists += '<div><p>' + listFiles[i].fileName + '</p>' +
                                '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delInfoFile(\'' + listFiles[i].id + '\')">删除</button> </div>';
                        }
                    }
                    $('#iconicResult').html(pdfLists)
                    $('#qualityBonus').html(jpgLists);
                    $('#filezip').html(zipLists);
                }
            })
        }
        //查看图片
        function viewFilejpg(e) {
            var index = layer.open({
                type: 2 ,
                title: '支撑文件查看',
                shade: 0.1,
                // area: ['1500px', '800px'],
                // area: ['1500px', '800px'],
                content: MODULE_PATH + 'upload/pic?e='+e
            });
            layer.full(index)
        }

        //删除佐证
        window.delFile = function (id, localPath) {
            $.ajax({
                url: MODULE_PATH + '/delEvidence',
                dataType: 'json',
                type: 'post',
                data: {
                    "id": id,
                    "localPath": localPath
                },
                success: function (result) {
                    if (result.code === 200) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            getEvidenceList();
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
        }
    })
</script>
</body>
</html>